// 添加坐标和辅助控制器

import { useEffect } from 'react';

import './App.css';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
function App() {
  useEffect(() => {
    // 1、创建场景
    const sence = new THREE.Scene();

    //2、创建相机
    const camera = new THREE.PerspectiveCamera(
      45,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );

    //3、创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 4、创建几何体
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);

    // 5、将网格添加到场景
    sence.add(cube);

    // 6、设置相机位置
    camera.position.z = 5;
    camera.position.x = 3;
    camera.position.y = 2;
    camera.lookAt(0, 0, 0);

    // -----------------添加世界坐标辅助器
    const axesHelper = new THREE.AxesHelper(5);
    sence.add(axesHelper);
    // ----------添加轨道控制器(鼠标控制物体)
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.autoRotate = true; // 以自动围绕目标旋转
    controls.dampingFactor = 0.5; // 阻尼惯性的速度
    //7、渲染
    function animate() {
      controls.update(); // ----------
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(sence, camera);
    }
    animate();
  }, []);

  return <div></div>;
}

export default App;
